<template>
	<view class="container">
		<Navigator2 :title="$t('device.confirmOrder')"></Navigator2>
		<view class="content">
			<view class="desc">
				<image src="/static/purchase_mic.png" style="width: 52px;height: 52px;" alt="" />
				<view class="desc_info">
					<view class="desc_top">{{ $t('device.purchaseCloneVoice') }}</view>
					<view class="desc_bottom">{{ $t('device.singlePurchaseCanBeModifiedTenTimes') }}</view>
				</view>
			</view>
			<view class="cost">
				<view class="cost_item">
					<text>{{ $t('device.originalAmount') }}</text>
					<text>{{orderInfo.originalAmount}}</text>
				</view>
				<view class="cost_item">
					<text>{{ $t('device.actualAmount') }}</text>
					<text>{{orderInfo.amount}}</text>
				</view>
				<view class="cost_item">
					<text>{{ $t('device.discountAmount') }}</text>
					<text>{{orderInfo.discountAmount}}</text>
				</view>
			</view>
			<view class="cost">
				<view class="cost_item">
					<text>{{ $t('device.orderNumber') }}</text>
					<text>{{orderInfo.orderNo}}</text>
				</view>
				<view class="cost_item">
					<text>{{ $t('device.orderTime') }}</text>
					<text>{{orderInfo.createTime}}</text>
				</view>
				<view class="cost_item">
					<text>{{ $t('device.paymentMethod') }}</text>
					<text>{{ $t('device.onlinePayment') }}</text>
				</view>
			</view>
		</view>
		<view class="purchase" @click="purchase">
			<text>{{ $t('device.immediatelyPay') }}</text>
		</view>
	</view>
</template>

<script>
	import api from '@/js/api.js'
	import Navigator2 from '@/components/Navigator2.vue'
	
	export default {
		data() {
			return {
				deviceId: '',
				orderInfo: {}
			}
		},
		onLoad(param) {
			console.log('cloneVoiceOrder onLoad param: ', param)
			this.deviceId = param.deviceId
		},
		mounted() {
			this.getOrderInfo()
		},
		methods: {
			getOrderInfo() {
				const userInfo = uni.getStorageSync('userInfo')
				api.createCloneVoiceOrder(this.deviceId, userInfo.id).then(res => {
					console.log('API返回的原始数据:', res)
					this.orderInfo = res
				})
			},
			purchase() {
				uni.navigateTo({
					url: '/pages/device/orderpay?orderId=' + this.orderInfo.orderId + '&business=cloneVoice' + '&createTime=' + this.orderInfo.createTime
				})
			}
		},
		components: {
			Navigator2
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #F0F2F5;
	}
	
	.content {
		padding: 16px;
		.desc {
			display: flex;
			margin: 16px 0 30px 16px;
			.desc_info {
				margin-left: 30px;
				.desc_top {
					font-size: 24px;
					font-weight: 600;
					line-height: 24px;
					letter-spacing: 0px;
					color: #1F2937;
				}
				.desc_bottom {
					margin-top: 12px;
					font-size: 12px;
					font-weight: 400;
					line-height: 18px;
					letter-spacing: 0px;
					color: #707A89;
				}
			}
		}
		.cost {
			border-radius: 8px;
			margin-top: 16px;
			box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
			overflow: hidden;
			.cost_item {
				height: 48px;
				display: flex;
				padding-left: 16px;
				background: #FFFFFF;
				border: 1rpx solid #EBEFF4;
				gap: 11px;
				&:first-child {
					border-radius: 8px 8px 0 0;
				}
				&:last-child {
					border-radius: 0 0 8px 8px;
				}
				&:first-child:last-child {
					border-radius: 8px;
				}
				text:first-child {
					font-size: 16px;
					font-weight: 400;
					line-height: 24px;
					display: flex;
					align-items: center;
					color: #AEB9CB;
				}
				text:last-child {
					margin-left: 26px;
					font-size: 16px;
					font-weight: 400;
					line-height: 24px;
					display: flex;
					align-items: center;
					color: #141619;
				}
			}
		}
	}
	
	// .purchase {
	// 	font-size: 16px;
	// 	font-weight: 400;
	// 	margin-left: 20px;
	// 	margin-right: 20px;
	// 	margin-bottom: 20px;
	// 	border-radius: 8px;
	// 	color: white;
	// 	margin-top: 80px;
	// 	background-color: #0256FF;
	// 	text-align: center;
	// 	height: 45px;
	// 	line-height: 45px;
	// 	position: fixed;
	// 	bottom: 0;
	// 	width: 90%;
	// 	z-index: 999; /* 防止被覆盖 */
	// }

	.purchase {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 20rpx;
		background-color: #FFFFFF;
		box-sizing: border-box;

		text {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 88rpx;
			background-color: #0256FF;
			border-radius: 8px;
			font-size: 32rpx;
			font-weight: 400;
			color: #FFFFFF;
			border: none;
			transition: all 0.2s ease;

			&:active {
				background-color: #0245E6;
				transform: scale(0.98);
			}
		}
	}
</style>
